<template>
  <div>
    <div class="message_info">
      <div class="message_title">
        <img src="../assets/images/right_arrow.png" />
        <span>近半年走势图</span>
      </div>
      <div class="message_content" id="moneyAmount" style="height:280px;margin-top:-15px"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
           textStyle: {
            color: '#fff'
          },
          data: [],
        },
        grid: {
          top: "30%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {},
        },
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          type: "category",
  axisLine: {
            lineStyle: {
              color: '#0A46F2', // 颜色
              width: 2 // 粗细
            }
          },
          data: [],
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          // 设置网格线样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#0A46F2'],
              width: 1,
              type: 'solid'
            }
          },
           // 设置 y轴样式
          axisLine: {
            lineStyle: {
              color: '#0A46F2', // 颜色
              width: 2 // 粗细
            }
          },
          type: "value",
        },
        series: [],
      },
    };
  },
  created() {},
  mounted() {
    // 近半年走势图
    var myChart1 = echarts.init(document.getElementById("moneyAmount"));
    this.Api.getConsumptionTrend().then((res) => {
       this.option.xAxis.data=res.data[0].period;
     
      res.data.forEach((res) => {
       
        this.option.legend.data.push(res.feesName)
      });
   
      for (var i = 0; i < res.data.length; i++) {
        this.option.series.push({
          name: res.data[i].feesName,
          type: "line",
          stack: "总量",
          data: res.data[i].amount
        });
      }
  
      myChart1.setOption(this.option);
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(this.option);
  },
};
</script>
<style lang="less" scoped>
.message_info {
  width: 452px;
  margin: 24px 30px;
  height: 295px;
}
.message_title {
  padding: 6px 0;
  width: 100%;
  height: 45px;
  font-size: 28px;
  font-weight: 500;
  color: #06ffff;
  line-height: 45px;
  margin-top: -10px;
  margin-bottom: 10px;
}

.message_title img {
  height: 24px;
  width: 24px;
}

.message_content {
  margin-top: 20px;
}
.report {
  margin-top: 20px;
}
</style>